
<!-- 
    表单 客户 选择项  因为和其他select 不太相似 所以单独写一个

    @author yangjinlai 20200828

    slotFormSet 是初始表单配置项

        其中的beforeData 是初始表单的值（回显）

        isDisabled 是当前是否可用的状态

        params是表单基本配置项

            其中的 isRequired 表示此表单项是否为必填

            httpUrl 搜索弹层上的  列表接口请求的地址

            searchListType 搜索弹层组件里用的  类别标识  具体见弹层组件说明

            type 当前页面是新建资产配置还是编辑资产配置 add新建 edit编辑            

            icon 客户选择右边的icon标识，默认是箭头，可以改成放大镜

            showIcon 表示展示icon  默认为true

    表单项的数据绑定在val上面，val变化后，触发父组件的changeCustomerVal方法，将val传递过去

-->

<template v-slot="slotFormSet">

    <div calss="customerFormItem">

        <div class="item itemSelect">

            <!-- 必填项的* -->
            <span class="isRequired" v-if="slotFormSet.params.isRequired">*</span>

            <a class="mint-cell mint-field">
                <div class="mint-cell-left"></div>
                <div class="mint-cell-wrapper">
                    <div class="mint-cell-title">
                        <span class="mint-cell-text" :class="[slotFormSet.isDisabled ? 'isDisabled' : '']">{{slotFormSet.params.label}}</span>
                    </div> 
                    <div class="mint-cell-value">

                        <!-- 点击选择 -->
                        <span class='span placeholder' v-if="!val" @click="openCusList()">请选择</span>

                        <!-- 点击选择 -->
                        <span class='span placeholder result' v-if="val" @click="openCusList()" :class="[slotFormSet.isDisabled ? 'isDisabled' : '']">{{val}}</span>



                         <!-- 右边的箭头 -->
                        <i class="iconfont icon-forward" v-html="iconTxt" v-if="showIcon"></i>

                        <!-- 新建按钮 只有新建资产的时候才显示 -->
                        <div class="add" v-if=" slotFormSet.params.type == 'add' ">
                            <span class="line">/</span>
                            <div @click="goAddCustomer()" class="addBtn"> 
                                <i class="iconfont">&#xe65e;</i>
                                <span class="addSpan">新建</span>
                            </div>
                        </div>
                    </div>
                </div> 
                <!-- <div class="mint-cell-right"></div> -->
            </a>


            


            <!-- <label class="lb">{{slotFormSet.params.label}}</label>

            <div class="selectDiv">
                <i class="mui-icon mui-icon-forward"></i>

                <span  :class="val ? 'placeholder span' : 'placeholder tipCor span'"  @click="openCusList()" >
                    <template v-if="val">
                        {{val}}
                    </template>
                     <template v-else>
                        请选择
                    </template>
                </span>
            </div> -->

            
        </div>

        <!-- 客户弹框 -->
        <search-list  ref="searchCusList" @searchCallback="searchCallback" :httpUrl="slotFormSet.params.httpUrl" :type="slotFormSet.params.searchListType"></search-list>
    </div>

</template>

<script>


// import searchList from '@src/common/components/searchList/searchList'

export default {
    name: 'slotFormCustomer',
    props:{
        slotFormSet: { //表单默认配置
            type: Object
        },
    },
    data(){
        return {
            val: null ,
            icon: '&#xe664;',
            iconTxt: '',
            showIcon: true,

            //弹层搜出来并选则的客户数据
            customerData: null,

            //是否可用的状态，默认可用
            isDisabled: false
        }
    },
    components:{

        //弹窗搜索，点击键盘的搜索按钮搜素，不是实时搜索
        searchList : resolve => require(['@src/common/components/searchList/searchList'],resolve),
    },
    mounted(){

        this.isDisabled = this.slotFormSet.isDisabled ? this.slotFormSet.isDisabled : this.isDisabled
    },
    watch:{

        'val': function(newVal,oldVal){

            console.log('newVal', newVal)
            console.log('oldVal', oldVal)

            //通过触发父组件的方法，保持val和父组件的变量同步
            //3个参数， newVal, oldVal, 其他需要回传的数据
            this.$parent.changeCustomerVal(newVal, oldVal, this.customerData );

            //请求客户接口
            // this.getCustomerApi()

        },

        //监听外部传参的变化
        'slotFormSet.beforeData': function(newVal,oldVal){
            console.log('设置客户接口数据', newVal)
            this.val = newVal

        },

        //监听外部传参的变化  是否可用的状态
        'slotFormSet.isDisabled': function(newVal,oldVal){
            console.log('变为不可用', newVal)
            this.isDisabled = newVal
        },
    },

    methods: {

        //请求客户接口
        // getCustomerApi( item ){
        //     this.$axiosHttp.http({
        //         name:'获取用户',
        //         url: apiUrl.getCustomerInfoByIdAndSortApi,
        //         params: {
        //             customerSort: arg['customerSort'],
        //             customerId: arg['customerId']
        //         }
        //     }, (res) => {
        //         var data = res.data.data;
        //         this.getAssetId(data)
        //     }, res => {
               
        //     })
        // },

        // onValuesChange(picker, values) {
        //     if (values[0] > values[1]) {
        //         picker.setSlotValue(1, values[0]);
        //     }
        // },

        //跳转 新建跟踪客户
        goAddCustomer(){
           // this.$parent.****
        },

        //打开客户列表
        openCusList(){

            console.log( this.isDisabled)

            //可点击的时候才能打开
            if( !this.isDisabled ){
                this.$refs.searchCusList.open();
            }
            
        },

        //组件搜索后，列表点击调用的回调函数
        //item是选中的数据
        //将数据设置到页面表单项上
        searchCallback( item ){
            
            this.$parent.getCustomerAssetDetailByCustomerApi(item);
            // this.val = item.customerName
            // this.customerData = item
        },

     },
}
</script>
